<script setup lang="ts">
import KnowledgeCard from "./KnowledgeCard.vue";
import { getKnowledgePageAPI } from '@/services/home'
import type {KnowledgeParams, Knowledge} from '@/types/home'
import {ref} from 'vue'

// 外部传入的当前列表分类
const props = defineProps<{
  type: 'food' | 'fatReduction' | 'recommend' | 'like';
}>()

// 定义请求参数
const params = ref<KnowledgeParams>({
  type: props.type,
  current: 1,
  pageSize: 5
})

// 定义一个数组存放数据
const list = ref<Knowledge[]>([])

const onLoad = async () => {
  // 控制加载中状态
  isLoading.value = true

  console.log('触发加载');
  const res = await getKnowledgePageAPI(params.value)
  list.value = [
    ...list.value,
    ...res.data.rows
  ]

  // 读取完一页, 需要把页码+1, 方便下次请求
  params.value.current++
  // 想要处理是否已经加载完毕的逻辑, 又懒得记录总页数
  // 可以通过判断, 获取的数据结果长度是否小于要求的长度
  isFinished.value = res.data.rows.length < params.value.pageSize

  isLoading.value = false
}

// 这里不用手动发请求, 交给列表组件管理即可
// onLoad()
const isLoading = ref(false)
const isFinished = ref(false)
</script>

<template>
  <div class="knowledge-list">
    <van-list
      @load="onLoad"
      v-model:loading="isLoading"
      :finished="isFinished"
      finished-text="没有更多了"
    >
      <!-- 遍历知识列表渲染卡片, 然后将遍历到的每个知识, 都要父传子的形式, 放入到卡片当中 -->
      <knowledge-card v-for="item in list" :key="item.id" :item="item"></knowledge-card>
      <!-- 此处应该以当前type获取文章列表, 然后遍历,每篇文章渲染一个卡片 -->
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>